  <template>
    <div>
      <!-- 权限层 -->
       <div >
         <PermissionLayer :show="showPermissionLayer" />
       </div>
     
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" class="el-table" stripe @selection-change="handChangedel">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable"  />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectTemplate" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </el-tab-pane>
        <el-tab-pane label="我参与的项目" name="participation">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
              class="el-table" @click="handChange">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectTemplate" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>


              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我管理的项目" name="mangage" @click="manage">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
              class="el-table" @click="handChange">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectTemplate" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>


              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我监控的项目" name="monitor">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
              class="el-table" @click="handChange">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectTemplate" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>


              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我审核的项目" name="audit">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
              class="el-table" @click="handChange">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>

              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我创建的项目" name="create">
          <div class="all-box">
            <el-button type="text" plain class="add-btn" @click="dialogTableVisible">+
              新建项目</el-button>
            <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
              class="el-table" @click="handChange">
              <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
              <el-table-column prop="projectId" label="项目编号" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称" sortable width="120">
              </el-table-column>
              <el-table-column prop="projectTemplate" label="项目模板" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectStatus" label="项目状态" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectLeader" label="项目负责人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="task" label="任务" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="completionOfTask" label="任务完成" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="question" label="问题" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="document" label="文档" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="schedule" label="进度" sortable :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="beginningAndEndingTime" label="起止时间" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="creationTime" label="创建时间" sortable :formatter="formatter"
                width="120"></el-table-column>
              <el-table-column prop="projectApprover" label="项目审批人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectSupervisor" label="项目监控人" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectTeam" label="项目团队" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column prop="projectDescription" label="项目描述" :formatter="formatter" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作11" width="100">
                <template slot-scope="scope">
                  <el-button @click="del(scope.row)" type="text" size="small">移除</el-button>
                  <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div>
        <el-button plain medium style="margin-top: 15px;" @click="delProject">批量删除</el-button>
      </div>
    </div>
  </template>
<script>
import { deleteProject, selectProject, selectProjectByInfor } from '../../api/project'
import PermissionLayer from '../../components/PermissionLayer.vue'

export default {
  components: {
    PermissionLayer
  },
  data() {
    return {
      projectId: '',
      active: 'all',
      tableData1: [],
      selectedRows:[],
      showPermissionLayer: '',
      username: '',
      projectRoles: {
        creator: null,
        projectTeam: null,
        projectApprover: null,
        projectSupervisor: null,
        projectLeader: null,
      },
      delid:[]
    };
  },
  methods: {
    handleClick(tab) {
      this.resetProjectRoles();
      switch (tab.label) {
        case "我创建的项目":
          this.projectRoles.creator = this.username;
          break;
        case "我审核的项目":
          this.projectRoles.projectApprover = this.username;
          break;
        case "我管理的项目":
          this.projectRoles.projectLeader = this.username;
          break;
        case "我监控的项目":
          this.projectRoles.projectSupervisor = this.username;
          break;
        case "我参与的项目":
          this.projectRoles.projectTeam = this.username;
          break;
        default:
          break;
      }
      this.fetchProjectsByRoles();
    },
    dialogTableVisible() {
      this.$router.push('../xiangmu/newProject');
    },
    update(data) {
      console.log(data);
      if (data) {
        localStorage.setItem('projectData', JSON.stringify(data));
        console.log(data);
        this.$router.push('../xiangmu/updateProject');
      } else {
        this.$message.error('没有数据可以更新');
      }
    },
    del(row) {
      let data = {
        projectId: row.projectId,

      }
      console.log(data);

      deleteProject(data).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'info',
            message: '删除成功!'
          });
          this.fetchProjectsByRoles();
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        }
      }).catch(error => {
        console.error(res);
      }).catch(error => {
        console.error('删除项目失败:', error);
      });

    },
    fetchProjectsByRoles() {
      let data = {
        projectId: this.projectRoles.projectId,
        projectTeam: this.projectRoles.projectTeam,
        creator: this.projectRoles.creator,
        projectApprover: this.projectRoles.projectApprover,
        projectSupervisor: this.projectRoles.projectSupervisor,
        projectLeader: this.projectRoles.projectLeader,
      };
      selectProjectByInfor(data).then(res => {
        console.log(res.code);
        if (res.code === 200) {

          this.tableData1 = res.result;
        } else {

          this.tableData1 = [];
        }
      }).catch(error => {
        console.error('获取项目失败:', error);
        this.tableData1 = [];
      });
    },
    selectProject() {
      selectProject().then(res => {
        if (res.code === 200) {
          this.showPermissionLayer = false;
        }else{
          this.showPermissionLayer = true;
        }
        this.username = res.result[1];
        this.tableData = res.result[0];
      }).catch(error => {
        console.error('获取项目失败:', error);
      });
    },
    resetProjectRoles() {
      this.projectRoles = {
        creator: null,
        projectTeam: null,
        projectApprover: null,
        projectSupervisor: null,
        projectLeader: null,
      };
    }
  },

  mounted() {
    this.selectProject(); // 组件挂载时获取所有项目
    this.fetchProjectsByRoles(); // 组件挂载时获取当前用户的项目
    this.checkPermission(); // 组件挂载时检查权限
  }
};
</script>
<style></style>